<template>
  <div class="login-main">
    <el-row :gutter="0">
      <el-col :xs="0" :sm="0" :md="0" :lg="14">
        <div class="left">
          <div class="sys-title">
            <h3>欢迎光临</h3>
            <p>一个基于Vue3+Element-plus搭建的轻量级后台管理系统模板。</p>
            <p>持续更新中......</p>
          </div>
          <img src="@/assets/login-btm.png" />
          <div class="out-img">
            <img src="@/assets/people.svg" />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="10">
        <div class="form">
          <div class="logo">
            <img src="" />
            <span>走过路过</span>
          </div>
          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="rules"
            label-width="80px"
          >
            <el-form-item prop="username">
              <el-input
                placeholder="用户名"
                :maxLength="20"
                v-model="loginForm.username"
                :prefix-icon="User"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                placeholder="密码"
                v-model="loginForm.password"
                type="password"
                show-password
                autocomplete="off"
                :prefix-icon="Lock"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(loginFormRef)"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { login } from '@/request/login'
import type {LoginResp} from '@/request/login'
import {useUserStore} from '@/store/user'
const loginForm = reactive({
  username: 'admin',
  password: '123456',
})
const validateUser = (rule: any, value: any, callback: any) => {
  if (value.length < 4) {
    callback(new Error('用户名长度必须大于4位'))
  } else {
    callback()
  }
}
const validatePass = (rule: any, value: any, callback: any) => {
  if (value.length < 6) {
    callback(new Error('密码长度必须大于6位'))
  } else {
    callback()
  }
}
const loginFormRef = ref<FormInstance>()

let rules = reactive({
  username: [
    // { required: true, message: '用户名不能为空', trigger: 'blur' },
    // { min: 5, max: 10, message: '用户名长度在6到10位之间', trigger: 'change' },
    { required: true, validator: validateUser, trigger: 'change' },
  ],
  password: [
    // { required: true, message: '密码不能为空', trigger: 'blur' },
    // { min: 6, max: 15, message: '密码长度在6到15位之间', trigger: 'change' },
    { required: true, validator: validatePass, trigger: 'change' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      login<LoginResp>(loginForm).then(res => {
        const store = useUserStore()
        store.setUserInfo({
          username: res.data.username,
          token: res.data.token,
          userId:res.data.userId,
          avatar:res.data.avatar,
        })
      }).catch(() => {

      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style lang="scss" scoped>
.login-main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .el-row {
    width: 100%;
    height: 100%;
  }
  .left {
    position: relative;
    width: 100%;
    height: 100%;
    .sys-title {
      position: absolute;
      top: 160px;
      right: 180px;
      h3 {
        font-size: 28px;
        font-weight: 700;
        margin: 0px;
      }
      p {
        font-size: 12px;
        color: gray;
        margin: 10px 0px 0px 0px;
      }
    }
    .out-img {
      position: absolute;
      top: 150px;
      width: 40%;
      height: 80%;
      img {
        width: 100%;
        height: 100%;
        transform: rotateY(180deg);
      }
    }
    img {
      position: absolute;
      bottom: 0px;
      width: 100%;
    }
  }
  .form {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
}
</style>
